<template>
	<view class="evaluate-wrap flex-column">
		<view v-if="showToast" class="toast-wrap flex-column flex-center flex-items-center">
			<view class="title">
				提交成功
			</view>
			<view class="tip">
				{{countdown}}S后返回【我接收的任务】
			</view>
		</view>
		<uv-navbar title="评价" bg-color="rgba(0,0,0,.0)" :placeholder='true' leftIconSize="20px" leftIconColor="#313C56"
			:autoBack='true' titleStyle="font-size: 16px;font-weight: 500;color: #313c56;" />
		<view class="content">
			<view class="star-wrap">
				<view class="title">
					任务满意度
				</view>
				<view class="star-list flex-row flex-center flex-items-center">
					<image v-for="(item,index) in scoreList" :key="index"
						:src="item<=score?'../../static/star-active.png':'../../static/star.png'" mode=""
						@click="clickStar(item)"></image>
				</view>
			</view>
			<view class="textarea-wrap">
				<view class="title">
					请输入你对本次任务的评价
				</view>
				<uv-textarea class="textarea" v-model="value" placeholder="请输入"></uv-textarea>
			</view>

		</view>
		<view class="toolbar" :style="{height: $uv.addUnit(toolbarHeight)}">
			<view class="flex-row flex-center flex-items-center" style="width:100%;height: 68px; ">
				<view class="confirm flex-row-center" @click="">
					提交
				</view>
			</view>
		</view>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				score: 0,
				scoreList: [1, 2, 3, 4, 5, 6],
				showToast: false,
				countdown: 3,
				value: '',
			};
		},
		methods: {
			clickStar(score) {
				this.score = score
			},
		}
	}
</script>

<style lang="scss" scoped>
	.evaluate-wrap {
		position: relative;
		height: 100vh;
		width: 100vw;
		background-color: #fff;
		padding: 0 16px;
		box-sizing: border-box;


		.toast-wrap {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 279px;
			height: 84px;
			box-shadow: 0 12px 24px 0 rgba(16, 24, 40, 0.18);
			border-radius: 12px;

			.title {
				font-size: 18px;
				color: #313C56;
			}

			.tip {
				font-size: 14px;
				color: #6B7885;
				margin-top: 4px;
			}
		}

		.content {
			flex: 1;

			.star-wrap {
				padding-bottom: 24px;

				image {
					width: 32px;
					height: 32px;
					margin-right: 8px;
				}
			}

			.title {
				font-size: 14px;
				color: #313C56;
				margin: 16px 0;
			}

			.textarea-wrap {
				.title {
					color: #95A4B3;
				}

				.textarea {
					width: 100%;
					box-sizing: border-box;
					border: none;
					padding: 0;
					color: #313C56;
					font-size: 16px;
				}
			}

		}

		.toolbar {
			.confirm {
				width: 303px;
				height: 44px;
				background: #EB7520;
				box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
				border-radius: 80px 80px 80px 80px;
				font-size: 16px;
				color: #FFFFFF;
			}
		}
	}
</style>